<template>
  <div>
    <div>
      <div id="app" align="left" style="padding-top: 0px">
<!--        <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
          <div class="box">
            <div class="content1">{{ item.key }}</div>
            <div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
          </div>
        </el-col>-->
          <el-col>
          <el-descriptions class="margin-top" title="个人信息:" :column="3"  border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                姓名
              </template>
              {{this.info.stuName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                性别
              </template>
              {{this.info.gender}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                民族
              </template>
              {{this.info.nation}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                籍贯
              </template>
              {{this.info.nativePlace}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                政治面貌
              </template>
              {{this.info.politicalStatus }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                院校
              </template>
              {{this.info.academyName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                专业
              </template>
              {{this.info.majorName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                年级
              </template>
              {{this.info.gradeName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                班级
              </template>
              {{this.info.className}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                班级类型
              </template>
              {{this.info.deptDescription}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                紧急联系人
              </template>
              {{this.info.familyMemberName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                紧急联系人电话
              </template>
              {{this.info.familyPhone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                班主任
              </template>
              {{this.info.headTeacher }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{this.info.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                邮箱
              </template>
              {{this.info.email}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                居住地
              </template>
              {{ this.info.familyAddr  }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
              </template>
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                后续再加
              </template>
              {{ this.wait == "" ? "待完善" : this.wait }}
            </el-descriptions-item>
          </el-descriptions>

        </el-col>
        <el-col>
          <div align="left" style="padding-top: 25px">个人信息维护:</div>
          <div align="left" style="padding-top: 15px">
            <el-row>
              <el-button  @click="updateHandle()" type="primary" round>个人信息修改</el-button>
              <el-button  @click="passwordUpdateHandle()" type="primary" round>密码修改</el-button>
              <el-button  @click="safeUpdateHandle()" type="primary" round>密保修改</el-button>
            </el-row>
          </div>
        </el-col>
      </div>
    </div>
    <Update v-if="UpdateVisible" phoneFa='phone' ref="Update" ></Update>
    <PasswordUpdate v-if="passwordUpdateVisible" ref="PasswordUpdate" ></PasswordUpdate>
    <SafeUpdate v-if="safeUpdateVisible" ref="SafeUpdate" ></SafeUpdate>
  </div>
</template>

<script>
import Update from "./studentInfoupdate";
import PasswordUpdate from "./studentpasswordupdate";
import SafeUpdate from "./studentsafeupdate";
import axios from "axios";
export default {
  name:'personInfo',
  components:{
    Update,
    PasswordUpdate,
    SafeUpdate
  },
  data() {
    return {
      UpdateVisible: false,
      passwordUpdateVisible: false,
      safeUpdateVisible:false,
      phone: "18888888888",
      wait:"",
      info:{
    academyName: "烹饪系",
    admissionDate: "2022-11-28T05:51:02.000+0000",
    admissionSeason: "春季",
    bedNum: 1,
    birthday: "2022-11-28T05:50:34.000+0000",
    checkIn: "2022-11-27T16:00:00.000+0000",
    classId: 7,
    className: "2班",
    classType: "1",
    createTime: "2022-11-28T05:51:44.000+0000",
    currentStatus: "1",
    deptDescription: "2017级烹饪系1班（升学）",
    dormNum: 1,
    email: null,
    entranceStatus: 300,
    familyAddr: "浙江省杭州市钱塘区文泽路",
    familyMemberName: "李四",
    familyPhone: "10000000000",
    feeStatus: 800,
    gender: "男",
    gradeId: 4,
    gradeName: "3年级",
    headTeacher: "朱博伦",
    headTeacherPhone: "12222222222",
    idCardAddr: "浙江省杭州市钱塘区文泽路",
    idNumber: "330901202211281234",
    isAdmissionEarly: true,
    isDeleted: 1,
    leaveDate: "2022-11-27T16:00:00.000+0000",
    majorName: "机电系",
    mobile: null,
    nation: "汉",
    nativePlace: "杭州",
    phone: "18888888888",
    politicalStatus: "团员",
    postCode: "330601",
    registerDate: "2022-11-28T05:51:04.000+0000",
    roomNum: 1,
    salt: null,
    schoolNumber: "202211280001",
    schoolingLength: 3,
    statusSchool: "浙江理工大学",
    stuId: 1,
    stuName: "张三",
      },

      howWidth: 12,
    };
  },
  created() {
    this.begin()
  },
  methods: {
    begin(){
      axios.get('/api/app/info/'+localStorage.getItem("studentId")).then((res)=>{
        console.log(res)
        this.info.stuName = res.data.stuName
        this.info.gender = res.data.gender
        this.info.nation = res.data.nation
        this.info.nativePlace = res.data.nativePlace
        this.info.phone = res.data.phone
        this.info.politicalStatus = res.data.politicalStatus
        this.info.postCode = res.data.postCode
        this.info.statusSchool = res.data.statusSchool
        this.info.majorName = res.data.majorName
        this.info.gradeName = res.data.gradeName
        this.info.className = res.data.className
        this.info.academyName = res.data.academyName
        this.info.familyAddr = res.data.familyAddr
        this.info.familyPhone = res.data.familyPhone
        this.info.familyMemberName = res.data.familyMemberName
        this.info.headTeacher = res.data.headTeacher
        this.info.deptDescription = res.data.deptDescription
        this.info.email = res.data.email
      })
    },
    updateHandle () {
      this.UpdateVisible = true
      this.$nextTick(() => {
        console.log(this.$refs.Update+222222222)
        this.$refs.Update.init()
      })
    },
    passwordUpdateHandle () {
      this.passwordUpdateVisible = true
      this.$nextTick(() => {
        console.log(this.$refs.Update+222222222)
        this.$refs.PasswordUpdate.init()
      })
    },
    safeUpdateHandle () {
      this.safeUpdateVisible = true
      this.$nextTick(() => {
        console.log(this.$refs.Update+222222222)
        this.$refs.SafeUpdate.init()
      })
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  box-sizing: border-box;
  .box {
    width: 100%;
    height: 40px;
    display: flex;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    .content1 {
      width: 40%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fafafa;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 14px;
    }
    .content2 {
      width: 60%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #b0b0b2;
      font-size: 14px;
    }
  }
}
</style>
